<template>
  <div class='container'>
    <div class="header">影院</div>
    <main @scroll="getScrollTop" ref="cinema">
      <div class="header-nav">
        <div class="region">
          <router-link tag="span" to="/select-city">{{ cityName }}</router-link>
          <b>&#xe688;</b>
        </div>
        <input type="text" value="找影院">
        <b>&#xe617;</b>
      </div>

      <div class="cinema-body" v-infinite-scroll="getCinemaAndRender" infinite-scroll-delay="300">
        <div class="cinema-content" v-for="cin in cinemaList.cinemas" :key="cin.id">
          <div class="list-name">
            <h3>{{ cin.nm }}</h3>
            <b>{{ cin.price }}<span>元起</span></b>
          </div>
          <div class="list-address">
            <p>{{ cin.addr }}</p>
            <span>{{ cin.distance }}</span>
          </div>
          <ul class="list-icon">
            <li>座</li>
            <!--            <li>{{ cin.labels[0].name }}</li>-->
            <!--            <li>{{ cin.labels[1].name }}</li>-->
            <!--            <li>{{ cin.labels[2].name }}</li>-->
            <li v-if="cin.labels[0]" :style=" {color:cin.labels[0].color}">{{ cin.labels[0].name }}</li>
            <li v-if="cin.labels[1]">{{ cin.labels[1].name }}</li>
            <li v-if="cin.labels[2]">{{ cin.labels[2].name }}</li>
            <li v-if="cin.labels[3]">{{ cin.labels[3].name }}</li>
            <li v-if="cin.labels[4]"> {{ cin.labels[4].name }}</li>
          </ul>
          <div class="discount">
            <span>惠</span>
            <span>{{ cin.promotion.platformActivityTag }}</span>
          </div>
        </div>
      </div>
    </main>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../components/Footer";
import {mapState, mapActions} from 'vuex'

export default {
  name: "Cinema",
  components: {
    Footer,
  },
  data() {
    return {
      cinemaList: [],
      id: 1,
      cityName: '',
      scrollTop: 0
    }
  },
  computed: {
    ...mapState('getCinemaList', ['cinema'])
  },
  async created() {
    await this.getCinema(this.id)
    this.cinemaList = this.cinema

  },
  activated() {
    this.cityName = this.Bus.city
    this.$refs.cinema.scrollTop = this.scrollTop //保留之前滚动条的位置
  },
  methods: {
    ...mapActions('getCinemaList', ['getCinema']),
    async getCinemaAndRender() {
      this.id++
      if (this.id > 8) {
        return
      }
      await this.getCinema(this.id)
      this.cinema.cinemas.forEach(item => this.cinemaList.cinemas.push(item))
    },
    getScrollTop: (function (waitTime) { //节流代码获取滚动距离
      let beforeChangeTime = 0
      return function () {
        let afterChangeTime = Date.now()
        if (afterChangeTime - beforeChangeTime > waitTime) {
          beforeChangeTime = afterChangeTime
          this.scrollTop = this.$refs.cinema.scrollTop //记录滚动距离
          console.log(this.scrollTop)
        }
      }
    })(100),
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/variable.scss';
@import '../assets/scss/mixin.scss';

@font-face {
  font-family: 'iconfont';
  src: url('../assets/icons/iconfont.eot');
  src: url('../assets/icons/iconfont.eot?#iefix') format('embedded-opentype'),
  url('../assets/icons/iconfont.woff2') format('woff2'),
  url('../assets/icons/iconfont.woff') format('woff'),
  url('../assets/icons/iconfont.ttf') format('truetype'),
  url('../assets/icons/iconfont.svg#iconfont') format('svg');
}

div.container {
  height: 100%;
  display: flex;
  flex-direction: column;

  > div.header {
    height: 0.44rem;
    background-color: $primary-color;
    line-height: 0.44rem;
    font-size: 0.2rem;
    color: #fff;
    text-align: center;
  }

  > main {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 0.16rem;
    overflow-y: scroll;
    @include icon;

    .header-nav {
      position: relative;
      // 经典的1px问题(物理像素)
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 0.8rem;
      padding-bottom: 0.2rem;
      height: 0.44rem !important;
      @include border-bottom-1px;

      > .region {
        position: absolute;
        top: 0;
        left: 0;
        height: 0.44rem;
        line-height: 0.44rem;
        color: $font-primary-color;
        padding-left: 0.1rem;
        transform: scale(0.9);

        b {
          font-size: 0.12rem;
        }
      }

      input {
        width: 2.95rem;
        height: 0.3rem;
        border: 1px solid $font-primary-color;
        color: $font-primary-color;
        text-align: center;
        margin-right: 0.1rem;
        margin-top: 0.2rem;
      }

      > b {
        position: absolute;
        color: $font-primary-color;
        left: 1.8rem;
        top: 0.13rem;
      }
    }


    .cinema-body {
      @include border-bottom-1px;
      flex: 1;
      //height: 1.12rem;
      display: flex;
      flex-direction: column;

      .cinemaBox {
        height: 100%
      }

      .list-name {
        display: flex;
        margin-top: 0.2rem;
        justify-content: space-around;
        height: 0.13rem;
        margin-bottom: 0.13rem;

        h3 {
          font-size: 0.15rem;
          width: 2rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          height: 0.4rem;
        }

        > b {
          margin-right: 0.75rem;
          color: #eb3c41;

          span {
            font-size: 0.1rem;
          }
        }
      }

      .list-address {
        display: flex;
        justify-content: space-around;
        height: 0.12rem;
        margin-bottom: 0.11rem;
        font-size: 0.12rem;
        color: $font-primary-color;
        position: relative;

        p {
          position: absolute;
          left: 0.14rem;
          width: 3rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        span {
          position: absolute;
          right: 0.13rem;
        }
      }

      .list-icon {
        display: flex;
        margin-left: 0.12rem;
        margin-bottom: 0.07rem;

        li {
          color: #85a4a9;
          border: 1px solid #85a4a9;
          padding: 0.03rem;
          border-radius: 5px;
          margin: 0 0.03rem;
          font-size: 0.1rem;
        }

        li:last-child {
          color: #f89907;
        }
      }

      .discount {
        font-size: 0.1rem;
        color: $font-primary-color;
        padding-left: 0.14rem;

        span:first-child {
          display: inline-block;
          width: 0.15rem;
          height: 0.15rem;
          border-radius: 3px;
          color: #fff;
          background-color: #f89907;
          margin-right: 0.05rem;
          text-align: center;
          line-height: 0.15rem;
        }
      }
    }
  }
}
</style>